<template>
	<base-page>
		<view slot="header">
			<cu-custom :isBack="true" bgColor="bg-white">
				<block slot="content">醒目大牌</block>
			</cu-custom>
			
			<view class="searchI" v-if='showSearch==true' style="margin-bottom: 20rpx;width: 93%;margin: 20rpx auto;">
				<view class="search-box" >
					<input type="text" value="" placeholder="搜一搜,店铺名" class="seach-input" v-model="keyText"
						@confirm="clickRequest" confirm-type="send" @input="inputVal" style="background-color: #f4f4f4;"/>
					<image :src="staticImgUrl+'chat/seach-icon.png'" mode="scaleToFill" class="seach-icon">
					</image>
				</view>
				<view class="cancel-text" @click="cancetext" style="background-color: #f4f4f4;">{{tipText}}</view>
			</view>
			
		</view>
		<view slot="center" class="bg-gray" style="height: 100%;">
			<view class="brand-content bg-lightgray">
				<mescroll-uni ref="mescroll" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback"
					:up="upOption" @up="upCallback" @scroll="scroll">
					<view class="markedin" @click="toSettlement">
						<image :src="staticImgUrl+'xmdprz.png'" mode=""></image>
					</view>
					<view class="searchI" v-if='showSearch==false'>
						<view class="search-box">
							<input type="text" value="" placeholder="搜一搜,店铺名" class="seach-input" v-model="keyText"
								@confirm="clickRequest" confirm-type="send" @input="inputVal" />
							<image :src="staticImgUrl+'chat/seach-icon.png'" mode="scaleToFill" class="seach-icon">
							</image>
						</view>
						<view class="cancel-text" @click="cancetext">{{tipText}}</view>
					</view>
					<view class="shopList ">
						<view class="shop-item bg-white df-cen-rl" v-for="(item, idx) in shopList" :key="idx"
							@click="jumpShopInfo(item)">
							<!-- <view class="logo"><image :src="" mode="" /></view> -->
							<view class="cu-avatar xl round margin-left detailsImage"
								:style="{ 'background-image': 'url(' + item.logo + ')' }"></view>
							<view class="name">{{ item.site_name }}</view>
							<view class=" cu-btn round line-red">进入店铺</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</base-page>
</template>

<script>
	import $Axios from '@/common/js/request/http.js'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';
	import {
		getShopList
	} from '@/common/js/request/modules/public.js';
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				downOption: {
					auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					onScroll:true,
					auto: false, // 不自动加载
					noMoreSize: 6, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
						tip: '~ 空空如也 ~' // 提示
					},
				},
				pageObj: {
					page: 1,
					page_size: 10
				},
				shopList: [],
				tipText: "全部店铺",
				keyText: "",
				showSearch:false
			};
		},
		onLoad(e) {},
		onShow(e) {},
		methods: {
			scroll(){
				// console.log('当前滚动条的位置:' + this.mescroll.scrollTop)
				if(this.mescroll.scrollTop>200){
					this.showSearch = true
				}else{
					this.showSearch = false
				}
			},
			/*下拉刷新的回调 */
			downCallback(e) {
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// console.log('log', page);
				let pageObj = {
					page: page.num,
					page_size: page.size
				};
				if(this.keyText==''){
					getShopList(pageObj)
						.then(res => {
							for (let i = 0; i < res.list.length; i++) {
								if (res.list[i].logo == '' || res.list[i].logo == null) {
									res.list[i].logo =
										'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shlogos.png'
								}
							}
							//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							this.mescroll.endSuccess(res.list.length);
							//设置列表数据
							if (page.num == 1) this.shopList = []; //如果是第一页需手动制空列表
							this.shopList = this.shopList.concat(res.list);
						})
						.catch(() => {
							//联网失败, 结束加载
							this.mescroll.endErr();
						});
				}else{
					$Axios.post(`api/search/getShopSearchList`, {
						keyword: this.keyText,
						pages: page.num,
						pages_size: page.size
					}).then(res => {
						// console.log(res.list)
						this.mescroll.endSuccess(res.list.length);
						for (let i = 0; i < res.list.length; i++) {
							if (res.list[i].logo == '' || res.list[i].logo == null) {
								res.list[i].logo =
									'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shlogos.png'
							}
						}
						if (page.num == 1) this.shopList = []; //如果是第一页需手动制空列表
						this.shopList = this.shopList.concat(res.list);
						// console.log("this.shopList", this.shopList)
					}).catch(() => {
						this.mescroll.endErr();
					});
				}

			},
			jumpShopInfo(val) {
				this.$Router.push({
					path: '/shopPages/shop/shop',
					query: {
						site_id: val.site_id
					}
				});
			},
			toSettlement() {
				this.$Router.push({
					path: '/shopPages/settlement/agreement'
				});
			},
			cancetext() {
				this.keyText = ''
				let pageObj = {
					page: 1,
					page_size: 10
				};
				getShopList(pageObj)
					.then(res => {
						this.mescroll.endSuccess(res.list.length);
						for (let i = 0; i < res.list.length; i++) {
							if (res.list[i].logo == '' || res.list[i].logo == null) {
								res.list[i].logo =
									'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shlogos.png'
							}
						}
						this.shopList = res.list
					})
					.catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
			},
			inputVal(e) {
				this.keyText = e.detail.value
			},
			// 点击搜索
			clickRequest() {

				if (this.keyText == '') {
					this.$Utils.tip('请输入店铺名称')
					return false
				} else {
					$Axios.post(`api/search/getShopSearchList`, {
						keyword: this.keyText,
						pages: 1,
						pages_size: 10
					}).then(res => {
						// console.log(res.list)
						this.mescroll.endSuccess(res.list.length);
						for (let i = 0; i < res.list.length; i++) {
							if (res.list[i].logo == '' || res.list[i].logo == null) {
								res.list[i].logo =
									'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/shlogos.png'
							}
						}
						this.shopList = res.list
						// console.log("this.shopList", this.shopList)
					}).catch(() => {
						this.mescroll.endErr();
					});
				}

			},
		},
		mounted() {
			// this.getShopListInfo();
		}
	};
</script>

<style lang="scss">
	/deep/.mescroll-uni {
		height: 100% !important;
	}

	.brand-content {
		padding: 0 30rpx;
		height: 100%;

		.shopList {
			.shop-item {
				justify-content: start;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-top: 20rpx;
			}

			.name {
				flex: 1;
				margin-left: 20rpx;
			}

			.logo {
				width: 100rpx;
				height: 100rpx;
				background: lightgray;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.btn {}

		.markedin {
			width: 690rpx;
			height: 260rpx;
			border-radius: 12rpx;
			margin-top: 20rpx;
		}

		.markedin image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	}

	.searchI {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
		.search-box {
			width: 600rpx;
			height: 56rpx;
			position: relative;

			.seach-input {
				width: 98%;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 28px;
				box-sizing: border-box;
				padding: 0 65rpx;
				font-weight: 500;
				color: #AAAAAA;
				font-size: 24rpx;
			}

			.seach-icon {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				left: 24rpx;
				top: 16rpx;
			}
		}

		.cancel-text {
			width: 160rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			text-align: center;
			line-height: 48rpx;
		}
	}
</style>
